// 基于准备好的dom，初始化echarts实例
import sunny_128 from '../static/img/sunny_128.png';
import cloudy_128 from '../static/img/cloudy_128.png';
import showers_128 from '../static/img/showers_128.png';
export default {
  name: 'index',
  data() {
    return {
      list: ['日历坐标图', '自定义系列', '数据集', '数据区域缩放', '拖拽', '富文本'],
      myChart: null
    }
  },
  mounted() {
    this.open(0);
  },
  methods: {
    open(n) {
      if (this.myChart !== null) {
        this.myChart.dispose();
      }
      this['drawLine' + n]();
    },
    drawLine0() {
      this.myChart = this.$echarts.init(document.getElementById('myChart2'));
      let myChart = this.$echarts.init(document.getElementById('myChart2'));
      let echarts = this.$echarts;
      let cellSize = [80, 80];
      let pieRadius = 30;

      function getVirtulData() {
        var date = +echarts.number.parseDate('2017-02-01');
        var end = +echarts.number.parseDate('2017-03-01');
        var dayTime = 3600 * 24 * 1000;
        var data = [];
        for (var time = date; time < end; time += dayTime) {
          data.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 10000)
          ]);
        }
        return data;
      }

      function getPieSeries(scatterData, chart) {
        return echarts.util.map(scatterData, function (item, index) {
          var center = chart.convertToPixel('calendar', item);
          return {
            id: index + 'pie',
            type: 'pie',
            center: center,
            label: {
              normal: {
                formatter: '{c}',
                position: 'inside'
              }
            },
            radius: pieRadius,
            data: [
              {name: '工作', value: Math.round(Math.random() * 24)},
              {name: '娱乐', value: Math.round(Math.random() * 24)},
              {name: '睡觉', value: Math.round(Math.random() * 24)}
            ]
          };
        });
      }

      function getPieSeriesUpdate(scatterData, chart) {
        return echarts.util.map(scatterData, function (item, index) {
          var center = chart.convertToPixel('calendar', item);
          return {
            id: index + 'pie',
            center: center
          };
        });
      }

      var scatterData = getVirtulData();

      let option = {
        tooltip : {},
        legend: {
          data: ['工作', '娱乐', '睡觉'],
          bottom: 20
        },
        calendar: {
          top: 'middle',
          left: 'center',
          orient: 'vertical',
          cellSize: cellSize,
          yearLabel: {
            show: false,
            textStyle: {
              fontSize: 30
            }
          },
          dayLabel: {
            margin: 20,
            firstDay: 1,
            nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
          },
          monthLabel: {
            show: false
          },
          range: ['2017-02']
        },
        series: [{
          id: 'label',
          type: 'scatter',
          coordinateSystem: 'calendar',
          symbolSize: 1,
          label: {
            normal: {
              show: true,
              formatter: function (params) {
                return echarts.format.formatTime('dd', params.value[0]);
              },
              offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
              textStyle: {
                color: '#000',
                fontSize: 14
              }
            }
          },
          data: scatterData
        }]
      };
      myChart.setOption(option);
      var pieInitialized;
      setTimeout(() => {
        pieInitialized = true;
        myChart.setOption({
          series: getPieSeries(scatterData, myChart)
        });
      }, 10);
      myChart.onresize = function (myChart) {
        if (pieInitialized) {
          myChart.setOption({
            series: getPieSeriesUpdate(scatterData, myChart)
          });
        }
      };
    },
    drawLine1() {
      this.myChart = this.$echarts.init(document.getElementById('myChart2'));
      let myChart = this.$echarts.init(document.getElementById('myChart2'));
      let echarts = this.$echarts;
      let yearCount = 7;
      let categoryCount = 30;
      let xAxisData = [];
      let customData = [];
      let legendData = [];
      let dataList = [];
      legendData.push('trend');
      let encodeY = [];
      for (let i = 0; i < yearCount; i++) {
        legendData.push((2010 + i) + '');
        dataList.push([]);
        encodeY.push(1 + i);
      }
      for (let i = 0; i < categoryCount; i++) {
        let val = Math.random() * 1000;
        xAxisData.push('category' + i);
        let customVal = [i];
        customData.push(customVal);

        for (let j = 0; j < dataList.length; j++) {
          let value = j === 0
            ? echarts.number.round(val, 2)
            : echarts.number.round(Math.max(0, dataList[j - 1][i] + (Math.random() - 0.5) * 200), 2);
          dataList[j].push(value);
          customVal.push(value);
        }
      }

      function renderItem(params, api) {
        let xValue = api.value(0);
        let currentSeriesIndices = api.currentSeriesIndices();
        let barLayout = api.barLayout({
          barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length - 1
        });

        let points = [];
        for (let i = 0; i < currentSeriesIndices.length; i++) {
          let seriesIndex = currentSeriesIndices[i];
          if (seriesIndex !== params.seriesIndex) {
            let point = api.coord([xValue, api.value(seriesIndex)]);
            point[0] += barLayout[i - 1].offsetCenter;
            point[1] -= 20;
            points.push(point);
          }
        }
        let style = api.style({
          stroke: api.visual('color'),
          fill: null
        });

        return {
          type: 'polyline',
          shape: {
            points: points
          },
          style: style
        };
      }

      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: legendData
        },
        dataZoom: [{
          type: 'slider',
          start: 50,
          end: 70
        }, {
          type: 'inside',
          start: 50,
          end: 70
        }],
        xAxis: {
          data: xAxisData
        },
        yAxis: {},
        series: [{
          type: 'custom',
          name: 'trend',
          renderItem: renderItem,
          itemStyle: {
            borderWidth: 2
          },
          encode: {
            x: 0,
            y: encodeY
          },
          data: customData,
          z: 100
        }].concat(echarts.util.map(dataList, function (data, index) {
          return {
            type: 'bar',
            animation: false,
            name: legendData[index + 1],
            itemStyle: {
              opacity: 0.5
            },
            data: data
          };
        }))
      };
      myChart.setOption(option);
    },
    drawLine2(){
      this.myChart = this.$echarts.init(document.getElementById('myChart2'));
      let myChart = this.$echarts.init(document.getElementById('myChart2'));
      this.$axios.get('/api/lifeTable').then((res) => {
        let data = res.data;
        var sizeValue = '57%';
        var symbolSize = 2.5;
        let option = {
          legend: {},
          tooltip: {},
          toolbox: {
            left: 'center',
            feature: {
              dataZoom: {}
            }
          },
          grid: [
            {right: sizeValue, bottom: sizeValue},
            {left: sizeValue, bottom: sizeValue},
            {right: sizeValue, top: sizeValue},
            {left: sizeValue, top: sizeValue}
          ],
          xAxis: [
            {type: 'value', gridIndex: 0, name: 'Income', axisLabel: {rotate: 50, interval: 0}},
            {type: 'category', gridIndex: 1, name: 'Country', boundaryGap: false, axisLabel: {rotate: 50, interval: 0}},
            {type: 'value', gridIndex: 2, name: 'Income', axisLabel: {rotate: 50, interval: 0}},
            {type: 'value', gridIndex: 3, name: 'Life Expectancy', axisLabel: {rotate: 50, interval: 0}}
          ],
          yAxis: [
            {type: 'value', gridIndex: 0, name: 'Life Expectancy'},
            {type: 'value', gridIndex: 1, name: 'Income'},
            {type: 'value', gridIndex: 2, name: 'Population'},
            {type: 'value', gridIndex: 3, name: 'Population'}
          ],
          dataset: {
            dimensions: [
              'Income',
              'Life Expectancy',
              'Population',
              'Country',
              {name: 'Year', type: 'ordinal'}
            ],
            source: data
          },
          series: [
            {
              type: 'scatter',
              symbolSize: symbolSize,
              xAxisIndex: 0,
              yAxisIndex: 0,
              encode: {
                x: 'Income',
                y: 'Life Expectancy',
                tooltip: [0, 1, 2, 3, 4]
              }
            },
            {
              type: 'scatter',
              symbolSize: symbolSize,
              xAxisIndex: 1,
              yAxisIndex: 1,
              encode: {
                x: 'Country',
                y: 'Income',
                tooltip: [0, 1, 2, 3, 4]
              }
            },
            {
              type: 'scatter',
              symbolSize: symbolSize,
              xAxisIndex: 2,
              yAxisIndex: 2,
              encode: {
                x: 'Income',
                y: 'Population',
                tooltip: [0, 1, 2, 3, 4]
              }
            },
            {
              type: 'scatter',
              symbolSize: symbolSize,
              xAxisIndex: 3,
              yAxisIndex: 3,
              encode: {
                x: 'Life Expectancy',
                y: 'Population',
                tooltip: [0, 1, 2, 3, 4]
              }
            }
          ]
        };
        myChart.setOption(option);
      });
    },
    drawLine3() {
      this.myChart = this.$echarts.init(document.getElementById('myChart2'));
      let myChart = this.$echarts.init(document.getElementById('myChart2'));
      let echarts = this.$echarts;
      var HEIGHT_RATIO = 0.6;
      var DIM_CATEGORY_INDEX = 0;
      var DIM_TIME_ARRIVAL = 1;
      var DIM_TIME_DEPARTURE = 2;
      var DATA_ZOOM_AUTO_MOVE_THROTTLE = 30;
      var DATA_ZOOM_X_INSIDE_INDEX = 1;
      var DATA_ZOOM_Y_INSIDE_INDEX = 3;
      var DATA_ZOOM_AUTO_MOVE_SPEED = 0.2;
      var DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH = 30;

      var _draggable;
      var _draggingEl;
      var _dropShadow;
      var _draggingCursorOffset = [0, 0];
      var _draggingTimeLength;
      var _draggingRecord;
      var _dropRecord;
      var _cartesianXBounds = [];
      var _cartesianYBounds = [];
      var _rawData;
      var _autoDataZoomAnimator;
      this.$axios.get('/api/airport').then((res) => {
        _rawData = res.data;
        myChart.setOption(makeOption());
        initDrag();
      });
      function makeOption() {
        return {
          tooltip: {
          },
          animation: false,
          toolbox: {
            left: 20,
            top: 0,
            itemSize: 20,
            feature: {
              myDrag: {
                show: true,
                title: 'Make bars\ndraggable',
                icon: 'path://M990.55 380.08 q11.69 0 19.88 8.19 q7.02 7.01 7.02 18.71 l0 480.65 q-1.17 43.27 -29.83 71.93 q-28.65 28.65 -71.92 29.82 l-813.96 0 q-43.27 -1.17 -72.5 -30.41 q-28.07 -28.07 -29.24 -71.34 l0 -785.89 q1.17 -43.27 29.24 -72.5 q29.23 -29.24 72.5 -29.24 l522.76 0 q11.7 0 18.71 7.02 q8.19 8.18 8.19 18.71 q0 11.69 -7.6 19.29 q-7.6 7.61 -19.3 7.61 l-518.08 0 q-22.22 1.17 -37.42 16.37 q-15.2 15.2 -15.2 37.42 l0 775.37 q0 23.39 15.2 38.59 q15.2 15.2 37.42 15.2 l804.6 0 q22.22 0 37.43 -15.2 q15.2 -15.2 16.37 -38.59 l0 -474.81 q0 -11.7 7.02 -18.71 q8.18 -8.19 18.71 -8.19 l0 0 ZM493.52 723.91 l-170.74 -170.75 l509.89 -509.89 q23.39 -23.39 56.13 -21.05 q32.75 1.17 59.65 26.9 l47.94 47.95 q25.73 26.89 27.49 59.64 q1.75 32.75 -21.64 57.3 l-508.72 509.9 l0 0 ZM870.09 80.69 l-56.13 56.14 l94.72 95.9 l56.14 -57.31 q8.19 -9.35 8.19 -21.05 q-1.17 -12.86 -10.53 -22.22 l-47.95 -49.12 q-10.52 -9.35 -23.39 -9.35 q-11.69 -1.17 -21.05 7.01 l0 0 ZM867.75 272.49 l-93.56 -95.9 l-380.08 380.08 l94.73 94.73 l378.91 -378.91 l0 0 ZM322.78 553.16 l38.59 39.77 l-33.92 125.13 l125.14 -33.92 l38.59 38.6 l-191.79 52.62 q-5.85 1.17 -12.28 0 q-6.44 -1.17 -11.11 -5.84 q-4.68 -4.68 -5.85 -11.7 q-2.34 -5.85 0 -11.69 l52.63 -192.97 l0 0 Z',
                onclick: onDragSwitchClick
              }
            }
          },
          title: {
            text: 'Gantt of Airport Flight',
            left: 'center'
          },
          dataZoom: [{
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'weakFilter',
            height: 20,
            bottom: 0,
            start: 0,
            end: 26,
            handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            showDetail: false
          }, {
            type: 'inside',
            id: 'insideX',
            xAxisIndex: 0,
            filterMode: 'weakFilter',
            start: 0,
            end: 26,
            zoomOnMouseWheel: false,
            moveOnMouseMove: true
          }, {
            type: 'slider',
            yAxisIndex: 0,
            zoomLock: true,
            width: 10,
            right: 10,
            top: 70,
            bottom: 20,
            start: 95,
            end: 100,
            handleSize: 0,
            showDetail: false,
          }, {
            type: 'inside',
            id: 'insideY',
            yAxisIndex: 0,
            start: 95,
            end: 100,
            zoomOnMouseWheel: false,
            moveOnMouseMove: true,
            moveOnMouseWheel: true
          }],
          grid: {
            show: true,
            top: 70,
            bottom: 20,
            left: 100,
            right: 20,
            backgroundColor: '#fff',
            borderWidth: 0
          },
          xAxis: {
            type: 'time',
            position: 'top',
            splitLine: {
              lineStyle: {
                color: ['#E9EDFF']
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              lineStyle: {
                color: '#929ABA'
              }
            },
            axisLabel: {
              color: '#929ABA',
              inside: false,
              align: 'center'
            }
          },
          yAxis: {
            axisTick: {show: false},
            splitLine: {show: false},
            axisLine: {show: false},
            axisLabel: {show: false},
            min: 0,
            max: _rawData.parkingApron.data.length
          },
          series: [{
            id: 'flightData',
            type: 'custom',
            renderItem: renderGanttItem,
            dimensions: _rawData.flight.dimensions,
            encode: {
              x: [DIM_TIME_ARRIVAL, DIM_TIME_DEPARTURE],
              y: DIM_CATEGORY_INDEX,
              tooltip: [DIM_CATEGORY_INDEX, DIM_TIME_ARRIVAL, DIM_TIME_DEPARTURE]
            },
            data: _rawData.flight.data
          }, {
            type: 'custom',
            renderItem: renderAxisLabelItem,
            dimensions: _rawData.parkingApron.dimensions,
            encode: {
              x: -1, // Then this series will not controlled by x.
              y: 0
            },
            data: echarts.util.map(_rawData.parkingApron.data, function (item, index) {
              return [index].concat(item);
            })
          }]
        };
      }
      function renderGanttItem(params, api) {
        var categoryIndex = api.value(DIM_CATEGORY_INDEX);
        var timeArrival = api.coord([api.value(DIM_TIME_ARRIVAL), categoryIndex]);
        var timeDeparture = api.coord([api.value(DIM_TIME_DEPARTURE), categoryIndex]);
        var coordSys = params.coordSys;
        _cartesianXBounds[0] = coordSys.x;
        _cartesianXBounds[1] = coordSys.x + coordSys.width;
        _cartesianYBounds[0] = coordSys.y;
        _cartesianYBounds[1] = coordSys.y + coordSys.height;
        var barLength = timeDeparture[0] - timeArrival[0];
        // Get the heigth corresponds to length 1 on y axis.
        var barHeight = api.size([0, 1])[1] * HEIGHT_RATIO;
        var x = timeArrival[0];
        var y = timeArrival[1] - barHeight;
        var flightNumber = api.value(3) + '';
        var flightNumberWidth = echarts.format.getTextRect(flightNumber).width;
        var text = (barLength > flightNumberWidth + 40 && x + barLength >= 180)
          ? flightNumber : '';
        var rectNormal = clipRectByRect(params, {
          x: x, y: y, width: barLength, height: barHeight
        });
        var rectVIP = clipRectByRect(params, {
          x: x, y: y, width: (barLength) / 2, height: barHeight
        });
        var rectText = clipRectByRect(params, {
          x: x, y: y, width: barLength, height: barHeight
        });
        return {
          type: 'group',
          children: [{
            type: 'rect',
            ignore: !rectNormal,
            shape: rectNormal,
            style: api.style()
          }, {
            type: 'rect',
            ignore: !rectVIP && !api.value(4),
            shape: rectVIP,
            style: api.style({fill: '#ddb30b'})
          }, {
            type: 'rect',
            ignore: !rectText,
            shape: rectText,
            style: api.style({
              fill: 'transparent',
              stroke: 'transparent',
              text: text,
              textFill: '#fff'
            })
          }]
        };
      }
      function renderAxisLabelItem(params, api) {
        var y = api.coord([0, api.value(0)])[1];
        if (y < params.coordSys.y + 5) {
          return;
        }
        return {
          type: 'group',
          position: [
            10,
            y
          ],
          children: [{
            type: 'path',
            shape: {
              d: 'M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z',
              x: 0,
              y: -20,
              width: 90,
              height: 20,
              layout: 'cover'
            },
            style: {
              fill: '#368c6c'
            }
          }, {
            type: 'text',
            style: {
              x: 24,
              y: -3,
              text: api.value(1),
              textVerticalAlign: 'bottom',
              textAlign: 'center',
              textFill: '#fff'
            }
          }, {
            type: 'text',
            style: {
              x: 75,
              y: -2,
              textVerticalAlign: 'bottom',
              textAlign: 'center',
              text: api.value(2),
              textFill: '#000'
            }
          }]
        };
      }
      function clipRectByRect(params, rect) {
        return echarts.graphic.clipRectByRect(rect, {
          x: params.coordSys.x,
          y: params.coordSys.y,
          width: params.coordSys.width,
          height: params.coordSys.height
        });
      }
// -------------
//  Enable Drag
// -------------
      function onDragSwitchClick(model, api, type) {
        _draggable = !_draggable;
        myChart.setOption({
          dataZoom: [{
            id: 'insideX',
            disabled: _draggable
          }, {
            id: 'insideY',
            disabled: _draggable
          }]
        });
        this.model.setIconStatus(type, _draggable ? 'emphasis' : 'normal');
      }
      function initDrag() {
        _autoDataZoomAnimator = makeAnimator(dispatchDataZoom);
        myChart.on('mousedown', function (param) {
          if (!_draggable || !param || param.seriesIndex == null) {
            return;
          }
          // Drag start
          _draggingRecord = {
            dataIndex: param.dataIndex,
            categoryIndex: param.value[DIM_CATEGORY_INDEX],
            timeArrival: param.value[DIM_TIME_ARRIVAL],
            timeDeparture: param.value[DIM_TIME_DEPARTURE]
          };
          var style = {lineWidth: 2, fill: 'rgba(255,0,0,0.1)', stroke: 'rgba(255,0,0,0.8)', lineDash: [6, 3]};
          _draggingEl = addOrUpdateBar(_draggingEl, _draggingRecord, style, 100);
          _draggingCursorOffset = [
            _draggingEl.position[0] - param.event.offsetX,
            _draggingEl.position[1] - param.event.offsetY
          ];
          _draggingTimeLength = _draggingRecord.timeDeparture - _draggingRecord.timeArrival;
        });
        myChart.getZr().on('mousemove', function (event) {
          if (!_draggingEl) {
            return;
          }
          var cursorX = event.offsetX;
          var cursorY = event.offsetY;
          // Move _draggingEl.
          _draggingEl.attr('position', [
            _draggingCursorOffset[0] + cursorX,
            _draggingCursorOffset[1] + cursorY,
          ]);
          prepareDrop();
          autoDataZoomWhenDraggingOutside(cursorX, cursorY);
        });
        myChart.getZr().on('mouseup', function () {
          // Drop
          if (_draggingEl && _dropRecord) {
            updateRawData() && myChart.setOption({
              series: {
                id: 'flightData',
                data: _rawData.flight.data
              }
            });
          }
          dragRelease();
        });
        myChart.getZr().on('globalout', dragRelease);
        function dragRelease() {
          _autoDataZoomAnimator.stop();
          if (_draggingEl) {
            myChart.getZr().remove(_draggingEl);
            _draggingEl = null;
          }
          if (_dropShadow) {
            myChart.getZr().remove(_dropShadow);
            _dropShadow = null;
          }
          _dropRecord = _draggingRecord = null;
        }
        function addOrUpdateBar(el, itemData, style, z) {
          var pointArrival = myChart.convertToPixel('grid', [itemData.timeArrival, itemData.categoryIndex]);
          var pointDeparture = myChart.convertToPixel('grid', [itemData.timeDeparture, itemData.categoryIndex]);
          var barLength = pointDeparture[0] - pointArrival[0];
          var barHeight = Math.abs(
            myChart.convertToPixel('grid', [0, 0])[1] - myChart.convertToPixel('grid', [0, 1])[1]
          ) * HEIGHT_RATIO;
          if (!el) {
            el = new echarts.graphic.Rect({
              shape: {x: 0, y: 0, width: 0, height: 0},
              style: style,
              z: z
            });
            myChart.getZr().add(el);
          }
          el.attr({
            shape: {x: 0, y: 0, width: barLength, height: barHeight},
            position: [pointArrival[0], pointArrival[1] - barHeight]
          });
          return el;
        }
        function prepareDrop() {
          // Check droppable place.
          var xPixel = _draggingEl.shape.x + _draggingEl.position[0];
          var yPixel = _draggingEl.shape.y + _draggingEl.position[1];
          var cursorData = myChart.convertFromPixel('grid', [xPixel, yPixel]);
          if (cursorData) {
            // Make drop shadow and _dropRecord
            _dropRecord = {
              categoryIndex: Math.floor(cursorData[1]),
              timeArrival: cursorData[0],
              timeDeparture: cursorData[0] + _draggingTimeLength
            };
            var style = {fill: 'rgba(0,0,0,0.4)'};
            _dropShadow = addOrUpdateBar(_dropShadow, _dropRecord, style, 99);
          }
        }
        // This is some business logic, don't care about it.
        function updateRawData() {
          var flightData = _rawData.flight.data;
          var movingItem = flightData[_draggingRecord.dataIndex];

          // Check conflict
          for (var i = 0; i < flightData.length; i++) {
            var dataItem = flightData[i];
            if (dataItem !== movingItem
              && _dropRecord.categoryIndex === dataItem[DIM_CATEGORY_INDEX]
              && _dropRecord.timeArrival < dataItem[DIM_TIME_DEPARTURE]
              && _dropRecord.timeDeparture > dataItem[DIM_TIME_ARRIVAL]
            ) {
              alert('Conflict! Find a free space to settle the bar!');
              return;
            }
          }
          // No conflict.
          movingItem[DIM_CATEGORY_INDEX] = _dropRecord.categoryIndex;
          movingItem[DIM_TIME_ARRIVAL] = _dropRecord.timeArrival;
          movingItem[DIM_TIME_DEPARTURE] = _dropRecord.timeDeparture;
          return true;
        }
        function autoDataZoomWhenDraggingOutside(cursorX, cursorY) {
          // When cursor is outside the cartesian and being dragging,
          // auto move the dataZooms.
          var cursorDistX = getCursorCartesianDist(cursorX, _cartesianXBounds);
          var cursorDistY = getCursorCartesianDist(cursorY, _cartesianYBounds);

          if (cursorDistX !== 0 || cursorDistY !== 0) {
            _autoDataZoomAnimator.start({
              cursorDistX: cursorDistX,
              cursorDistY: cursorDistY
            });
          }
          else {
            _autoDataZoomAnimator.stop();
          }
        }
        function dispatchDataZoom(params) {
          var option = myChart.getOption();
          var optionInsideX = option.dataZoom[DATA_ZOOM_X_INSIDE_INDEX];
          var optionInsideY = option.dataZoom[DATA_ZOOM_Y_INSIDE_INDEX];
          var batch = [];
          prepareBatch(batch, 'insideX', optionInsideX.start, optionInsideX.end, params.cursorDistX);
          prepareBatch(batch, 'insideY', optionInsideY.start, optionInsideY.end, -params.cursorDistY);
          batch.length && myChart.dispatchAction({
            type: 'dataZoom',
            batch: batch
          });
          function prepareBatch(batch, id, start, end, cursorDist) {
            if (cursorDist === 0) {
              return;
            }
            var sign = cursorDist / Math.abs(cursorDist);
            var size = end - start;
            var delta = DATA_ZOOM_AUTO_MOVE_SPEED * sign;
            start += delta;
            end += delta;
            if (end > 100) {
              end = 100;
              start = end - size;
            }
            if (start < 0) {
              start = 0;
              end = start + size;
            }
            batch.push({
              dataZoomId: id,
              start: start,
              end: end
            });
          }
        }
        function getCursorCartesianDist(cursorXY, bounds) {
          var dist0 = cursorXY - (bounds[0] + DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH);
          var dist1 = cursorXY - (bounds[1] - DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH);
          return dist0 * dist1 <= 0
            ? 0 // cursor is in cartesian
            : dist0 < 0
              ? dist0 // cursor is at left/top of cartesian
              : dist1; // cursor is at right/bottom of cartesian
        }
        function makeAnimator(callback) {
          var requestId;
          var callbackParams;
          // Use throttle to prevent from calling dispatchAction frequently.
          callback = echarts.throttle(callback, DATA_ZOOM_AUTO_MOVE_THROTTLE);
          function onFrame() {
            callback(callbackParams);
            requestId = requestAnimationFrame(onFrame);
          }
          return {
            start: function (params) {
              callbackParams = params;
              if (requestId == null) {
                onFrame();
              }
            },
            stop: function () {
              if (requestId != null) {
                cancelAnimationFrame(requestId);
              }
              requestId = callbackParams = null;
            }
          };
        }
      }

    },
    drawLine4() {
      this.myChart = this.$echarts.init(document.getElementById('myChart2'));
      let myChart = this.$echarts.init(document.getElementById('myChart2'));
      let echarts = this.$echarts;
      var symbolSize = 20;
      var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];
      let option = {
        title: {
          text: 'Try Dragging these Points'
        },
        tooltip: {
          triggerOn: 'none',
          formatter: function (params) {
            return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
          }
        },
        grid: {
        },
        xAxis: {
          min: -100,
          max: 80,
          type: 'value',
          axisLine: {onZero: false}
        },
        yAxis: {
          min: -30,
          max: 60,
          type: 'value',
          axisLine: {onZero: false}
        },
        dataZoom: [
          {
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'empty'
          },
          {
            type: 'slider',
            yAxisIndex: 0,
            filterMode: 'empty'
          },
          {
            type: 'inside',
            xAxisIndex: 0,
            filterMode: 'empty'
          },
          {
            type: 'inside',
            yAxisIndex: 0,
            filterMode: 'empty'
          }
        ],
        series: [
          {
            id: 'a',
            type: 'line',
            smooth: true,
            symbolSize: symbolSize,
            data: data
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(function () {
        // Add shadow circles (which is not visible) to enable drag.
        myChart.setOption({
          graphic: echarts.util.map(data, function (item, dataIndex) {
            return {
              type: 'circle',
              position: myChart.convertToPixel('grid', item),
              shape: {
                cx: 0,
                cy: 0,
                r: symbolSize / 2
              },
              invisible: true,
              draggable: true,
              ondrag: echarts.util.curry(onPointDragging, dataIndex),
              onmousemove: echarts.util.curry(showTooltip, dataIndex),
              onmouseout: echarts.util.curry(hideTooltip, dataIndex),
              z: 100
            };
          })
        });
      }, 0);
      window.addEventListener('resize', updatePosition);
      myChart.on('dataZoom', updatePosition);
      function updatePosition() {
        myChart.setOption({
          graphic: echarts.util.map(data, function (item, dataIndex) {
            return {
              position: myChart.convertToPixel('grid', item)
            };
          })
        });
      }
      function showTooltip(dataIndex) {
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: dataIndex
        });
      }
      function hideTooltip(dataIndex) {
        myChart.dispatchAction({
          type: 'hideTip'
        });
      }
      function onPointDragging(dataIndex, dx, dy) {
        data[dataIndex] = myChart.convertFromPixel('grid', this.position);
        // Update data
        myChart.setOption({
          series: [{
            id: 'a',
            data: data
          }]
        });
      }

    },
    drawLine5() {
      this.myChart = this.$echarts.init(document.getElementById('myChart2'));
      let myChart = this.$echarts.init(document.getElementById('myChart2'));
      let echarts = this.$echarts;
      var weatherIcons = {
        'Sunny': sunny_128,
        'Cloudy': cloudy_128,
        'Showers': showers_128
      };
      var seriesLabel = {
        normal: {
          show: true,
          textBorderColor: '#333',
          textBorderWidth: 2
        }
      };
      let option = {
        title: {
          text: 'Weather Statistics'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['City Alpha', 'City Beta', 'City Gamma']
        },
        grid: {
          left: 100
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'value',
          name: 'Days',
          axisLabel: {
            formatter: '{value}'
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          data: ['Sunny', 'Cloudy', 'Showers'],
          axisLabel: {
            formatter: function (value) {
              return '{' + value + '| }\n{value|' + value + '}';
            },
            margin: 20,
            rich: {
              value: {
                lineHeight: 30,
                align: 'center'
              },
              Sunny: {
                height: 40,
                align: 'center',
                backgroundColor: {
                  image: weatherIcons.Sunny
                }
              },
              Cloudy: {
                height: 40,
                align: 'center',
                backgroundColor: {
                  image: weatherIcons.Cloudy
                }
              },
              Showers: {
                height: 40,
                align: 'center',
                backgroundColor: {
                  image: weatherIcons.Showers
                }
              }
            }
          }
        },
        series: [
          {
            name: 'City Alpha',
            type: 'bar',
            data: [165, 170, 30],
            label: seriesLabel,
            markPoint: {
              symbolSize: 1,
              symbolOffset: [0, '50%'],
              label: {
                formatter: '{a|{a}\n}{b|{b} }{c|{c}}',
                backgroundColor: 'rgb(242,242,242)',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 4,
                padding: [4, 10],
                lineHeight: 26,
                // shadowBlur: 5,
                // shadowColor: '#000',
                // shadowOffsetX: 0,
                // shadowOffsetY: 1,
                position: 'right',
                distance: 20,
                rich: {
                  a: {
                    align: 'center',
                    color: '#fff',
                    fontSize: 18,
                    textShadowBlur: 2,
                    textShadowColor: '#000',
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 1,
                    textBorderColor: '#333',
                    textBorderWidth: 2
                  },
                  b: {
                    color: '#333'
                  },
                  c: {
                    color: '#ff8811',
                    textBorderColor: '#000',
                    textBorderWidth: 1,
                    fontSize: 22
                  }
                }
              },
              data: [
                {type: 'max', name: 'max days: '},
                {type: 'min', name: 'min days: '}
              ]
            }
          },
          {
            name: 'City Beta',
            type: 'bar',
            label: seriesLabel,
            data: [150, 105, 110]
          },
          {
            name: 'City Gamma',
            type: 'bar',
            label: seriesLabel,
            data: [220, 82, 63]
          }
        ]
      };
      myChart.setOption(option);
    }
  }
}
